<%--
  Created by IntelliJ IDEA.
  User: 30919
  Date: 2025/9/17
  Time: 10:55
  To change this template use File | Settings | File Templates.
--%>
<%--
  Created by IntelliJ IDEA.
  User: 30919
  Date: 2025/8/26
  Time: 18:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="header.jsp"/>
<!-- SweetAlert2 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

<style>
    :root {
        --bs-primary: #3b7ddd;
        --bs-primary-rgb: 59, 125, 221;
        --bs-success: #1cbb8c;
        --bs-success-rgb: 28, 187, 140;
        --bs-danger: #fc5b69;
        --bs-danger-rgb: 252, 91, 105;
        --bs-warning: #f7b84b;
        --bs-warning-rgb: 247, 184, 75;
        --bs-light-bg: #f5f7fa;
    }

    .card {
        border-radius: 0.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        border: none;
        margin-bottom: 1.5rem;
    }

    .card-header {
        background-color: #fff;
        border-bottom: 1px solid #eaeef1;
        padding: 1rem 1.25rem;
        font-weight: 600;
        color: #2c3e50;
    }

    .table-container {
        background-color: #fff;
        border-radius: 0.5rem;
        overflow: hidden;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }

    .table th {
        background-color: var(--bs-light-bg);
        color: #2c3e50;
        font-weight: 600;
        padding: 0.75rem 1rem;
        border-top: none;
    }

    .table td {
        padding: 0.75rem 1rem;
        vertical-align: middle;
    }

    .status-badge {
        padding: 0.35em 0.65em;
        border-radius: 0.25rem;
        font-size: 0.75em;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .bg-enabled {
        background-color: rgba(var(--bs-success-rgb), 0.15);
        color: var(--bs-success);
    }

    .bg-disabled {
        background-color: rgba(var(--bs-danger-rgb), 0.15);
        color: var(--bs-danger);
    }

    .action-btn {
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.875rem;
    }

    .search-box {
        position: relative;
    }

    .search-box .form-control {
        border-radius: 1.5rem;
        padding-left: 2.5rem;
    }

    .search-box .bi {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #6c757d;
        z-index: 10;
    }

    /* 动画效果 */
    .fade-in {
        animation: fadeIn 0.3s ease-in;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>
<%--标头--%>
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">XTEDU管理系统 - 技能得分</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
        </div>
    </div>
</div>

<%--教务上传技能考试文档--%>
<div>
    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#uploadModal">
        <i class="bi bi-cloud-upload"></i> 教务上传技能考试文档
    </button>
</div>

<!-- 教师上传技能考试 -->
<div class="card fade-in">
    <div class="card-body">
        <div class="row g-3 align-items-end">
            <div class="col-xl-5 col-lg-6 col-md-8 col-sm-12">
                <div class="d-flex gap-2 flex-wrap">
                    <div class="btn btn-success" onclick="openBatchAddModal()">
                        <i class="bi bi-upload me-1"></i>添加技能考试成绩
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%--学生下载技能考试文档--%>
<!-- 下载模板按钮 -->
<div class="text-center">
    <button type="button" class="btn btn-outline-primary" onclick="downloadDocx(${examId})">
        <i class="bi bi-download"></i> 下载技能考试文档
    </button>
</div>

<!-- 批量添加学生模态框 -->
<div class="modal fade" id="batchAddStudentModal" tabindex="-1" aria-labelledby="batchAddStudentModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="batchAddStudentModalLabel">批量添加学生</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="batchUploadForm" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="studentFile" class="form-label">选择Excel文件</label>
                        <input class="form-control" type="file" id="studentFile" accept=".xlsx,.xls,.csv" required>
                        <div class="form-text">支持Excel(.xlsx, .xls)或CSV文件格式</div>
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="hasHeader" checked>
                            <label class="form-check-label" for="hasHeader">
                                文件包含表头
                            </label>
                        </div>
                    </div>

                    <div class="alert alert-info">
                        <h6>文件格式要求：</h6>
                        <ul class="mb-0">
                            <li>列顺序：身份证号, 学生姓名, 性别(男/女),课程ID,课程名称, 考试ID,考试名称,创建时间,技能得分</li>
                            <li>请确保关键字列的顺序和格式正确, 否则将无法导入</li>
                            <li>请勿修改关键字列(身份证号,课程ID,考试ID,技能得分)</li>
                            <li>技能得分填写：0-100</li>
                        </ul>
                    </div>

                    <!-- 下载模板按钮 -->
                    <div class="text-center">
                        <button type="button" class="btn btn-outline-primary" onclick="downloadTemplate()">
                            <i class="bi bi-download"></i> 下载模板
                        </button>
                    </div>
                </form>

                <!-- 上传进度显示 -->
                <div id="uploadProgress" class="mt-3" style="display: none;">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                    </div>
                    <div class="text-center mt-2">
                        <span id="progressText">处理中...</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="uploadStudentFile()">开始上传</button>
            </div>
        </div>
    </div>
</div>
<!-- 教务上传文档模态框  -->
<div class="modal fade" id="uploadModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">批量导入题目</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">选择文件格式</label>
                    <select class="form-select">
                        <option>Excel (.xlsx)</option>
                        <option>CSV (.csv)</option>
                        <option>Word (.docx)</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">上传文件</label>
                    <input class="form-control" type="file" accept=".xlsx,.csv,.docx" multiple>
                </div>

                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i>
                    <a href="#">下载模板文件</a> 查看导入格式要求
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="uploadCancel">取消
                </button>
                <button type="button" class="btn btn-primary" id="uploadBtn">开始导入</button>
            </div>
        </div>
    </div>
</div>

<%--教师上传技能考试js--%>
<%--教师上传技能考试成绩，需要手动输入全部学生的信息，考试id,课程id，以及身份证(确保身份证是唯一的)，这样可以确定一个课程下的一次考试里的具体的某一个学生--%>
<%--后续功能实现：教师只需要填写对应的分数即可--%>
<%-- 在JSP页面头部添加records数据的JavaScript变量 --%>
<script>
    // 详细的数据检查 - 使用字符串拼接避免冲突
    // console.log('=== 数据传递检查 ===');

    // 使用JSTL将数据转换为JavaScript变量
    <c:choose>
    <c:when test="${not empty recordsJson}">
    var serverRecordsJsonString = '${recordsJson}';
    // console.log('原始JSON字符串:', serverRecordsJsonString);

    try {
        window.serverRecords = JSON.parse(serverRecordsJsonString);
        // console.log('JSON解析成功，记录数:', window.serverRecords.length);
        // console.log('第一条记录:', window.serverRecords[0]);
    } catch (e) {
        // console.error('JSON解析错误:', e);
        window.serverRecords = [];
    }
    </c:when>
    <c:otherwise>
    // console.warn('recordsJson 为空');
    window.serverRecords = [];
    </c:otherwise>
    </c:choose>

    // console.log('最终 serverRecords:', window.serverRecords);
</script>
<script>
    // 教师下载技能考试文档，填写成绩
    function downloadTemplate() {
        // console.log('开始生成模板，数据量:', window.serverRecords ? window.serverRecords.length : 0);
        // console.log('实际数据结构:', window.serverRecords);

        // 创建表头
        const headers = ['身份证号', '学生姓名', '性别', '课程ID', '课程名称', '考试ID', '考试名称', '创建时间', '技能得分'];
        const templateData = [headers];

        // 使用后端传过来的serverRecords数据填充模板
        if (window.serverRecords && window.serverRecords.length > 0) {
            // console.log('使用后端数据，记录数:', window.serverRecords.length);

            for (let i = 0; i < window.serverRecords.length; i++) {
                const record = window.serverRecords[i];
                // console.log('处理第' + (i + 1) + '条记录:', record);

                // 根据实际数据结构调整字段映射
                const row = [
                    record.idCard || '',                    // 身份证号
                    record.stuName || '',                  // 学生姓名 (注意：是stuName不是studentName)
                    formatGender(record.gender),           // 性别
                    record.courseId ? record.courseId.toString() : '',  // 课程ID
                    record.courseName || '',               // 课程名称
                    record.examId ? record.examId.toString() : '',      // 考试ID
                    record.examName || '',                 // 考试名称
                    formatCreateTime(record.createDate),   // 创建时间 (注意：是createDate不是createTime)
                    ''  // 技能得分留空，让教师填写
                ];
                templateData.push(row);
            }
        } else {
            // 如果没有数据，提供示例数据
            // console.warn('没有获取到学生数据，使用示例数据');
            const today = new Date().toISOString().split('T')[0];
            templateData.push([
                '110101199001011234', '张三', '男', '1', 'HTML', '1', '第一次月考', today, ''
            ]);
            templateData.push([
                '110101199002021235', '李四', '女', '1', 'HTML', '1', '第一次月考', today, ''
            ]);
        }

        // console.log('生成的模板数据:', templateData);

        // 将数据转换为CSV格式
        let csvContent = '';
        for (let i = 0; i < templateData.length; i++) {
            const row = templateData[i];
            const quotedRow = row.map(function(field) {
                return '"' + field + '"';
            });
            csvContent += quotedRow.join(',') + '\n';
        }

        // console.log('CSV内容:', csvContent);

        // 下载文件
        downloadCSVFile(csvContent);

        // console.log('模板下载完成，包含 ' + (templateData.length - 1) + ' 条学生记录');
    }

    // 性别格式化函数
    function formatGender(genderValue) {
        if (genderValue === true || genderValue === 'true' || genderValue === 1) {
            return '男';
        } else if (genderValue === false || genderValue === 'false' || genderValue === 0) {
            return '女';
        } else if (genderValue === '男' || genderValue === '女') {
            return genderValue;
        } else {
            return '';
        }
    }

    // 时间格式化函数 - 将 "10月 13, 2025" 转换为 "2025-10-13"
    function formatCreateTime(createDate) {
        if (!createDate) return '';

        try {
            // 如果已经是标准格式，直接返回
            if (createDate.match(/^\d{4}-\d{2}-\d{2}$/)) {
                return createDate;
            }

            // 处理 "10月 13, 2025" 格式
            if (createDate.match(/^\d{1,2}月 \d{1,2}, \d{4}$/)) {
                const parts = createDate.split(' ');
                const month = parts[0].replace('月', '');
                const day = parts[1].replace(',', '');
                const year = parts[2];

                // 补零
                const monthFormatted = month.padStart(2, '0');
                const dayFormatted = day.padStart(2, '0');

                return year + '-' + monthFormatted + '-' + dayFormatted;
            }

            return createDate; // 如果无法解析，返回原值
        } catch (e) {
            console.error('时间格式化错误:', e);
            return createDate;
        }
    }

    // 专门的CSV文件下载函数
    function downloadCSVFile(csvContent) {
        try {
            // 添加BOM头解决中文乱码问题
            const BOM = '\uFEFF';
            const contentWithBOM = BOM + csvContent;

            // 创建Blob对象
            const blob = new Blob([contentWithBOM], {
                type: 'text/csv;charset=utf-8;'
            });

            // 创建下载链接
            const link = document.createElement('a');
            const url = URL.createObjectURL(blob);

            // 生成文件名
            const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
            const fileName = '学生成绩填写模板_' + timestamp + '.csv';

            // 设置链接属性
            link.href = url;
            link.download = fileName;
            link.style.display = 'none';

            // 添加到DOM并触发点击
            document.body.appendChild(link);
            link.click();

            // 清理
            document.body.removeChild(link);
            setTimeout(function() {
                URL.revokeObjectURL(url);
            }, 100);

            // console.log('文件下载已触发，文件名: ' + fileName);

        } catch (error) {
            console.error('下载文件时出错:', error);
            alert('下载失败: ' + error.message);
        }
    }



    // 上传文件（保持不变）
    function uploadStudentFile() {
        const fileInput = document.getElementById('studentFile');
        const hasHeader = document.getElementById('hasHeader').checked;
        const progressDiv = document.getElementById('uploadProgress');
        const progressBar = progressDiv.querySelector('.progress-bar');
        const progressText = document.getElementById('progressText');

        if (!fileInput.files || fileInput.files.length === 0) {
            alert('请选择要上传的文件');
            return;
        }

        const file = fileInput.files[0];
        const formData = new FormData();
        formData.append('file', file);
        formData.append('hasHeader', hasHeader.toString());

        // 显示进度条
        progressDiv.style.display = 'block';
        progressBar.style.width = '0%';
        progressText.textContent = '开始上传...';

        fetch('practiceExam/batchAdd', {
            method: 'POST',
            body: formData
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('上传失败');
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    progressBar.style.width = '100%';
                    progressBar.classList.add('bg-success');
                    progressText.innerHTML = `
                <strong>上传成功！</strong><br>
                成功:` + data.successCount + `条,
                失败: ` + data.failCount + ` 条
                ${data.failCount > 0 ? '<br><small>失败详情请查看控制台</small>' : ''}`;

                    // 3秒后关闭模态框并刷新页面
                    setTimeout(() => {
                        const modal = bootstrap.Modal.getInstance(document.getElementById('batchAddStudentModal'));
                        modal.hide();
                        location.reload();
                    }, 3000);
                } else {
                    throw new Error(data.message || '上传失败');
                }
            })
            .catch(error => {
                console.error('上传失败:', error);
                progressBar.classList.add('bg-danger');
                progressText.innerHTML = `<strong>上传失败：</strong>${error.message}`;
            });
    }

    // 添加打开模态框的函数
    function openBatchAddModal() {
        // 重置表单
        document.getElementById('batchUploadForm').reset();
        document.getElementById('uploadProgress').style.display = 'none';

        const modal = new bootstrap.Modal(document.getElementById('batchAddStudentModal'));
        modal.show();
    }
</script>

<%--教务上传文档--%>
<%--当前教务上传文档，是上传到本次运行的tomcat服务器，是一个临时的，如果本次服务被销毁，就无法找到之前上传的文件--%>
<script>
    $(document).ready(function () {
        const $uploadModal = $("#uploadModal");
        const $uploadBtn = $("#uploadBtn");
        const fileInput = document.querySelector("#uploadModal input[type='file']");
        const $deleteBtns = $(".delBtn");
        const $addQuestionModal = $("#addQuestionModal");
        const $addModalBody = $addQuestionModal.find(".modal-body");
        const $addModalBtn = $addQuestionModal.find("#addModalBtn");
        const $editBtns = $(".editBtn");
        const $editModal = $("#editModal");
        const $editModalBody = $editModal.find(".modal-body");
        const $editModalBtn = $editModal.find("#editModalBtn");

        // 定义文件上传按钮的功能
        const uploadBtnHandler = function () {
            // 获取文件输入元素
            const files = fileInput.files;

            // 检查是否选择文件
            if (files.length === 0) {
                alert("请选择要上传的文件");
                return;
            }

            // 检查文件类型和大小
            const allowedTypes = ['xlsx', 'csv', 'docx'];
            const maxSize = 10 * 1024 * 1024; // 10MB
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const fileExtension = file.name.split('.').pop().toLowerCase();

                if (!allowedTypes.includes(fileExtension)) {
                    alert("只允许上传 Excel (.xlsx)、CSV (.csv) 或 Word (.docx) 文件");
                    return;
                }

                if (file.size > maxSize) {
                    alert("文件大小不能超过10MB");
                    return;
                }
            }
            // 创建FormData对象
            const formData = new FormData();
            for (let i = 0; i < files.length; i++) {
                formData.append("files", files[i]);
            }
            // 显示上传对象
            $uploadBtn.prop("disabled", true).text("上传中...");
            // 发送ajax请求 $.ajax返回deferred对象，不是标准的promise对象，所以不能用done方法
            $.ajax({
                url: "http://localhost:8080/examproject_war/practiceExam/upload",
                type: "POST",
                data: formData,
                // 告诉jQuery不要去设置Content-Type请求头， 因为表单上传文件不需要设置
                processData: false,
                contentType: false,
            }).done((result) => {
                alert("文件上传成功" + result.toString());
                $uploadModal.modal('hide');
                // 重置表单
                fileInput.value = "";
                window.location.reload();
            }).fail(error => {
                alert("文件上传失败: " + error.toString());
            }).always(() => {
                // 恢复按钮状态
                $uploadBtn.prop("disabled", false).text("开始导入");
            });
        }
        // 绑定事件 箭头函数不会创建自己的 this 上下文
        $uploadBtn.click(uploadBtnHandler);


        // 模态框隐藏时重置表单
        $uploadModal.on('hidden.bs.modal', function () {
            fileInput.value = "";
            $uploadBtn.prop("disabled", false).text("开始导入");
        });
    });
</script>

<%--学生下载技能考试文档，完成考试--%>
<%--学生下载技能考试文档，请确保当前的服务和教务所在的服务是同一个，否则会出现下载时找不到文件的问题--%>
<script>
    function downloadDocx(examId) {
        //通过考试id获取下载地址(绝对地址)，这里需要接收后端传过来的考试id，因为下载地址是动态的
        window.location.href = 'practiceExam/download?examId=' + 1;
    }
</script>
<jsp:include page="footer.jsp"/>